<template>
	<view class="content fofa">
		<view class="dis disAl " :style="'position: fixed;height: 80rpx;top: '+tops*2+'rpx;left: 40rpx;'">
			<!-- @click="tiaozhuan('/pages/attestation/attestation')" -->
			<view class="borRad40 dis disAl disJuC foSi20 coFFF" @click="toggle1('top')"
				style="width: 150rpx;height: 50rpx;background-color: rgba(000, 000, 000, 0.2);">
				<view class="mar-right10">{{userinfo.usertype? '企业版':'个人版'}}</view>
				<image :src="aurl+icon_list.xiala" style="width: 15rpx;height: 9rpx;"></image>
			</view>
		</view>
		<!-- <view :style="'height: '+tops*2+'rpx;background-color: '+back+';'"></view> -->
		<view style="height: 502rpx;box-sizing: border-box;background-size: 100% 100%;"
			:style="'background-image: url(' + aurl+theme_data.index_img + ')'">
			<view :style="'height: '+tops*2+'rpx;'"></view>
			<view class="dis disAl disJuC" :style="'height: 80rpx;'">
				<view class="foSi40 coFFF" :style="bgcolor">电子签</view>
			</view>
			<view v-if="Object.keys(userinfo).length > 0" class="wid87 mar dis disAl" style="margin-top: 200rpx;">
				<view class="foSi25 coFFF mar-right10">{{userinfo.accountname}}</view>
				<image :src="aurl+icon_list.renzheng" style="width: 26rpx;height: 26rpx;"></image>
			</view>
			<view v-else class="wid87 mar dis disAl foSi25 coFFF" style="margin-top: 310rpx;">登陆后即可体验电子签服务</view>
		</view>

		<view class="wid87 mar dis disAl disJuB" style="margin-top: -56rpx;">
			<view class="borRad20 bacFFF dis disAl box1" style="height: 250rpx;width: 47%;">
				<view class="textCen wid100" @click="toggle('bottom')">
					<image :src="aurl+theme_data.contract_img1" style="width: 70rpx;height: 90rpx;"></image>
					<view class="mar-top17 foSi30 fowe600">快速发起合同</view>
					<view class="mar-top17 foSi20" style="color: #4A4A4A;">支持企业模版</view>
				</view>
			</view>
			<view class="borRad20 bacFFF dis disAl box1" style="height: 250rpx;width: 47%;">
				<view class="textCen wid100" @click="tiaozhuan('/pages/template/templateLibrary')">
					<image :src="aurl+theme_data.contract_img2" style="width: 70rpx;height: 90rpx;"></image>
					<view class="mar-top17 foSi30 fowe600">企业模板库</view>
					<view class="mar-top17 foSi20" style="color: #4A4A4A;">查看、管理合同模板</view>
				</view>
			</view>
		</view>

		<view class="pending_processing_boox">
			<view class="pending_processing_boox_item">
				<view class="item_top" :style="{'border-left':'5px solid '+back}">
					<view style="margin-left: 10rpx;font-weight: bold;">电子合同</view>
					<view style="font-size: 28rpx;color: #4e4c4c;" @click="go_wenjian()">更多<uni-icons size="14" type="right"></uni-icons></view>
				</view>
				<view style="display: flex;justify-content: space-around;margin-top: 30rpx;">
					<view class="kuai_box" style="border-right: none;">
						<view class="kuai_item_top">我发起的</view>
						<view style="font-size: 27rpx;"><text class="fen_num">{{index_data.my_initiated_it}}</text>份</view>

					</view>
					<view class="kuai_box" style="border-right: none;">
						<view class="kuai_item_top">待我处理</view>
						<view style="font-size: 27rpx;"><text class="fen_num">{{index_data.wait_handle_it}}</text>份</view>
					</view>
					<view class="kuai_box" style="border-right: none;">
						<view class="kuai_item_top">待TA处理</view>
						<view style="font-size: 27rpx;"><text class="fen_num">{{index_data.wait_handle_other}}</text>份</view>
					</view>
					<view class="kuai_box" @click="cgx">
						<view class="kuai_item_top">草稿箱</view>
						<view style="font-size: 27rpx;"><text class="fen_num">{{index_data.drafts}}</text>份</view>
					</view>

				</view>
			</view>
		</view>
		<view style="background-color: #f3f3f3;">
			<view class="wid90 mar bacFFF borRad10" style="padding: 20rpx;">
				<view class="item_top" :style="{'border-left':'5px solid '+back}"
					style="display: flex;justify-content: space-between;">
					<view style="margin-left: 10rpx;font-weight: bold;">合同签署</view>
					<!-- <view style="font-size: 28rpx;color: #4e4c4c;">日期选择</view> -->
				</view>
				<view class="wid100">
					<qiun-data-charts :canvasId="num" canvas2d="true" type="ring" :opts="opts" :chartData="chartData" />
				</view>
			
			</view>
		</view>
		
		<view class="" style="background-color: #f3f3f3;height: 30rpx;">
			
		</view>


		<!-- 		<view v-if="Object.keys(userinfo).length > 0" class="wid87 mar box mar-top40 borRad20">
			<view style="height: 20rpx;"></view>
			<view class="wid90 mar dis disAl hei60 foSi25 mar-bott20">待办中心</view>
			<view class="wid90 mar dis disAl">
				<view class="" style="width: 33.33%;">
					<view class="foSi40 textCen">{{wait_handle_it}}</view>
					<view class="textCen mar-top17 foSi20" style="color: #4A4A4A;">待我处理</view>
				</view>
				<view class="" style="width: 33.33%;">
					<view class="foSi40 textCen">{{wait_handle_other}}</view>
					<view class="textCen mar-top17 foSi20" style="color: #4A4A4A;">待他人处理</view>
				</view>
				<view class="" style="width: 33.33%;">
					<view class="foSi40 textCen">{{about_time_out}}</view>
					<view class="textCen mar-top17 foSi20" style="color: #4A4A4A;">即将超时</view>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
		</view> -->
		<!-- 		<view class="wid87 mar box mar-top40 borRad20">
			<view style="height: 20rpx;"></view>
			<view class="wid90 mar dis disAl hei60 foSi25 mar-bott20">企业管理</view>
			<view class="wid90 mar dis disAl flwa">
				<view class="textCen" style="width: 25%;" @click="tiaozhuan('/pages/role/role')">
					<image src="https://www.sign.run/applet/static/index/jianse.png" style="width: 53rpx;height: 52rpx;"></image>
					<view class="mar-top17 foSi20" style="color: #4A4A4A;">角色管理</view>
				</view>
				<view class="textCen" style="width: 25%;" @click="tiaozhuan('/pages/staff/staff')">
					<image src="https://www.sign.run/applet/static/index/yuangong.png" style="width: 53rpx;height: 52rpx;"></image>
					<view class="mar-top17 foSi20" style="color: #4A4A4A;">员工管理</view>
				</view>
				<view class="textCen" style="width: 25%;" @click="tiaozhuan('/pages/template/template')">
					<image src="https://www.sign.run/applet/static/index/moban.png" style="width: 53rpx;height: 52rpx;"></image>
					<view class="mar-top17 foSi20" style="color: #4A4A4A;">模板管理</view>
				</view>
				<view class="textCen" style="width: 25%;" @click="tiaozhuan('/pages/seal/seal')">
					<image src="https://www.sign.run/applet/static/index/yinzhang.png" style="width: 53rpx;height: 52rpx;"></image>
					<view class="mar-top17 foSi20" style="color: #4A4A4A;">印章管理</view>
				</view>
				<view class="textCen mar-top30" style="width: 25%;">
					<image src="https://www.sign.run/applet/static/index/feiyong.png" style="width: 53rpx;height: 52rpx;"></image>
					<view class="mar-top17 foSi20" style="color: #4A4A4A;">费用管理</view>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
		</view> -->
		<view style="height: 100rpx;" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"></view>
		<tablist v-if="hideTabBar" :back="back" :backTwo="backTwo" :datalist="datalist" :index="0"></tablist>
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view style="height: 20rpx;"></view>
			<view class="hei80 dis disAl disJuC poRel">
				<view class="poAbs hei80 dis disAl" style="right: 40rpx;">
					<image :src="aurl+icon_list.guanbi" style="width: 40rpx;height: 40rpx;" @click="guanbi"></image>
				</view>
				<view class="foSi35 fowe600" style="">发起合同</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view class="wid80 mar dis disAl disJuB mar-top20" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
				<view class="dis disAl disJuC fleDir" @click="tiaozhuan('/pages/template/templateLibrary')">
					<image :src="aurl+icon_list.mobanku" style="width: 112rpx;height: 112rpx;"></image>
					<view class=" foSi25 mar-top20">模板库发起</view>
				</view>
				<view class="dis disAl disJuC fleDir" @click="wenjian">
					<image :src="aurl+icon_list.weixinfile" style="width: 112rpx;height: 112rpx;"></image>
					<view class=" foSi25 mar-top20">微信文件发起</view>
				</view>
				<view class="dis disAl disJuC fleDir" @click="tiaozhuan('/pages/wode/drafts')">
					<image :src="aurl+icon_list.caogao" style="width: 112rpx;height: 112rpx;"></image>
					<view class=" foSi25 mar-top20">合同草稿发起</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup1">
			<view :style="{'height':tops+'px'}"></view>
			<view class="wid90 mar bacFFF borRad10" style="margin-top: 90rpx;">
				<view v-for="(item_s,index_s) in list" :key="index_s" @click="switch_user(index_s)"
					class="wid90 hei80 mar dis disAl disJuB">
					<view class="dis disAl">
						<image v-if="item_s.usertype == 1" :src="aurl+icon_list.geren"
							style="width: 46rpx;height: 40rpx;"></image>
						<image v-else :src="aurl+icon_list.qiye" style="width: 46rpx;height: 40rpx;"></image>
						<view class="mar-left20 foSi30">{{ item_s.accountname }}</view>
					</view>
					<uni-icons v-if="item_s.id == userinfo.id" type="checkmarkempty" :color="back"
						size="25"></uni-icons>
				</view>
				<!-- <view class="hei80 mar bacFFF borRad10 dis disAl disJuC" @click="tiaozhuan('/pages/wode/establishFirm')"
					:style="'color: '+back+';'" style="height: 100rpx;">+ 创建企业</view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import tablist from "../common/tablist/tablist.vue"
	export default {
		components: {
			tablist
		},
		data() {
			return {
				hideTabBar: true,
				num: '',
				paddingBottomHeight: 0,
				datalist: [
					{name: '首页',url: '/pages/index/index'},
					{name: '合同',url: '/pages/wenjian/wenjian'},
					{name: '我的',url: '/pages/wode/wode'}
				],
				aurl: this.global.url,
				list: [],
				back: uni.getStorageSync('back'),
				backTwo: uni.getStorageSync('backTwo'),
				url: this.global.url,
				bgcolor: 'opacity:1',
				tops: '',
				// userinfo分两个，一个是个人主账户，一个是正在使用中的账户，账户更换在首页
				userinfo: {}, // 个人中心使用使用中账号
				token: '',
				wait_handle_it: 0,
				wait_handle_other: 0,
				about_time_out: 0,
				icon_list: {
					banner: '/addon/qianyu_dzq/wechatimg/banner.png',
					hetong1: '/addon/qianyu_dzq/wechatimg/hetong1.png',
					hetong2: '/addon/qianyu_dzq/wechatimg/hetong2.png',
					renzheng: '/addon/qianyu_dzq/wechatimg/renzheng.png',
					xiala: '/addon/qianyu_dzq/wechatimg/xiala.png',
					mobanku: '/addon/qianyu_dzq/wechatimg/mobanku.png',
					caogao: '/addon/qianyu_dzq/wechatimg/caogao.png',
					weixinfile: '/addon/qianyu_dzq/wechatimg/weixinfile.png',
					guanbi: '/addon/qianyu_dzq/wechatimg/guanbi.png',
					qiye: '/addon/qianyu_dzq/wechatimg/qiye.png',
					geren: '/addon/qianyu_dzq/wechatimg/geren.png',
				},
				index_data:{
					wait_handle_it:0,
					wait_handle_other:0,
					my_initiated_it:0,
					drafts:0,
				}, // 首页数据
				theme_data:{
					index_img:'',
					contract_img1:"",
					contract_img2:"",
				},// 主题数据
				chartData: {}, // 图表数据
				opts: {
					showBox: false,
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#13C2C2", "#91CB74", "#FAC858", "#EE6666", "#9A60B4"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "0",
						fontSize: 28,
						color: "#666666"
					},
					subtitle: {
						name: "总合同份数",
						fontSize: 15,
						color: "#7cb5ec"
					},
					extra: {
						tooltip: {
							 showBox: false, // 去除箭头
						},
						ring: {
							ringWidth: 20,
							activeOpacity: 0,
							activeRadius: 0,
							offsetAngle: 0,
							customRadius: 80,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 0 && e.scrollTop <= 5) {
				this.bgcolor = 'opacity:1';
			} else if (e.scrollTop >= 5 && e.scrollTop <= 10) {
				this.bgcolor = 'opacity:0.7';
			} else if (e.scrollTop > 10 && e.scrollTop <= 15) {
				this.bgcolor = 'opacity:0.4';
			} else if (e.scrollTop > 15 && e.scrollTop <= 20) {
				this.bgcolor = 'opacity:0.2';
			} else if (e.scrollTop > 20 && e.scrollTop <= 25) {
				this.bgcolor = 'opacity:0';
			}
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function (res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		onLoad(option) {
			uni.hideTabBar()
			if (option.scene) {
				const scene = decodeURIComponent(option.scene)
				uni.setStorageSync('scene', scene);
				uni.navigateTo({
					url: '/pages/template/replenishTwo?id=' + scene
				});
			}
			let that = this
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					this.tops = e.statusBarHeight
				}
			})
			this.get_themedata()
			uni.$on('login_out',function(data){
				// 监听用户信息刷新，重新获取数据
				console.log('退出登录')
				that.userinfo = {}
				that.list = []
				that.getList()
			})
			this.sanshi()
		},
		onShow() {
			var that = this
			var userinfo = uni.getStorageSync('inuse_userinfo');
			console.log('使用中用户信息')
			console.log(userinfo)
			if (userinfo) {
				that.userinfo = userinfo
				that.token = uni.getStorageSync('inuse_userinfo_token')
				
				that.get_account()
			}
			that.getList()
			setTimeout(() => {
				that.back = uni.getStorageSync('back')
				that.backTwo = uni.getStorageSync('backTwo')
			}, 500)
		},
		methods: {
			cgx(){
				uni.navigateTo({
					url:'/pages/wode/drafts'
				})
			},
			//生成32位随机字符串
			sanshi(){
				let str = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFJHIJKLMNOPQRSTUVWXYZ';
				this.num = '';
				for(let i=0;i<32;i++){
					this.num += str.charAt(Math.floor(Math.random() * str.length));
				};
				console.log('字符串',this.num)
			},
			wenjian() {
				let that = this //保留vue实例
				console.log('微信文件发起？')
				if (uni.getStorageSync('initiator_user')) {
					// 有草稿做提示
					uni.showModal({
						title: '提示',
						content: '你有一条未提交的合同填写记录，是否继续编辑？',
						cancelText: '重新上传',
						confirmText: '继续编辑',
						success: function(res) {
							if (res.confirm) {
								// 执行确认后的操作
								// that.wenjianfaqi()
								uni.navigateTo({
									url: '/pages/index/file-initiate'
								})
							} else {
								// 清空缓存内容
								uni.removeStorageSync('initiator_user');
								uni.removeStorageSync('signedby_user');
								uni.removeStorageSync('drafts_data');
								uni.removeStorageSync('initiator');
								that.wenjianfaqi()
							}
						}
					})
				} else {
					that.wenjianfaqi()
				}
			},
			wenjianfaqi() {
				let that = this
				that.$refs.popup.close()
				wx.chooseMessageFile({
					count: 1, //限制选择的文件数量
					type: 'file', //非图片和视频的文件,不选默认为all
					success(res) {
						const tempFilePaths = res.tempFiles
						let filename = res.tempFiles[0].name
						//客制化判断文件名,判断是不是xlsx文件,仅为参考,可自行变化
						if (filename.lastIndexOf('.pdf') == filename.length - 4 || filename.lastIndexOf('.pdf') ==
							filename.length - 4) {
							uni.showLoading({
								title: '加载中...'
							})
							uni.uploadFile({
								url: that.global.url + 'api/qianyu_dzq/applet_files_contracts_upload',
								header: {
									"token": uni.getStorageSync('inuse_userinfo_token'),
									"site-id": that.global.site_id
								}, //请求token	
								filePath: tempFilePaths[0].path,
								name: 'file',
								success: (res) => {
									uni.hideLoading()
									let result = JSON.parse(res.data)
									console.log(result);
									uni.setStorageSync('file_contract_id', result.data.fileids)
									uni.setStorageSync('file_data_id', result.data.data_id)
									uni.setStorageSync('file_url', result.data.file_url)
									uni.navigateTo({
										url: '/pages/index/file-initiate'
									})
									// var apiresult = JSON.parse(res.data)
									// if (apiresult.code == 1) {
									// 	console.log(apiresult.data.url);
									// 	// that.image = apiresult.data.url
									// } else {
									// 	uni.showToast({
									// 		title: apiresult.msg,
									// 		icon: 'error'
									// 	})
									// }
								},
								complete() {

								},
								fail() {
									uni.hideLoading()
									uni.showToast({
										title: "网络连接失败",
										icon: 'error'
									})
								}
							});
						} else {
							//客制化提示文件类型错误
							uni.showToast({
								title: '请选择pdf文件',
								icon: 'error',
								duration: 2000
							});
						}

					}
				})
			},
			switch_user(index) {
				let that = this
				let user = that.list[index]
				uni.showLoading({
					title: '切换中...'
				})
				uni.request({
					url: that.global.url + 'api/qianyu_dzq/applet_user_switch_account',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('main_userinfo_token')
					},
					data: {
						account_id: user.id
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							uni.setStorageSync('inuse_userinfo', user) // 使用中的用户信息
							uni.setStorageSync('inuse_userinfo_token', result.data) // 使用中的用户token
							that.userinfo = user
							that.token = result.data
							setTimeout(() => {
								uni.hideLoading()
								that.getList()
							}, 1000)
						} else {
							if (result.msg == "主账号无法重新获取token") {
								// 切换主账号
								that.userinfo = uni.getStorageSync('main_userinfo')
								that.token = uni.getStorageSync('main_userinfo_token')
								uni.setStorageSync('inuse_userinfo', that.userinfo) // 使用中的用户信息
								uni.setStorageSync('inuse_userinfo_token', that.token) // 使用中的用户token
								setTimeout(() => {
									that.getList()
									uni.hideLoading()
								}, 1000)
							} else {
								uni.hideLoading()
								that.getList()
								uni.showToast({
									title: result.msg,
									icon: 'none'
								})
							}
						}
						console.log('测试:', that.userinfo)
						uni.$emit('Refresh_userinfo', {
							msg: '更新用户信息重新获取数据'
						})
						that.$refs.popup1.close()
					},
					complete() {
						// uni.hideLoading()
					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			get_account() {
				// 获取账号列表：这里需要使用主账号来获取，一个主账号对应多个子账号，不可反向查询(没做这功能)
				let that = this
				uni.request({
					url: that.global.url + 'api/qianyu_dzq/applet_user_accountlist',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('main_userinfo_token')
					},
					data: {},
					success(res) {
						let result = res.data
						let cond = []
						let cond1 = []
						if (result.code == 1) {
							for (var i = 0; i < result.data.length; i++) {
								if (result.data[i]['usertype'] == 1) {
									cond.push(result.data[i])
								} else if (result.data[i]['usertype'] == 2) {
									cond1.push(result.data[i])
								} else if (result.data[i]['usertype'] == 3) {
									cond1.push(result.data[i])
								}
							}
							that.list = cond.concat(cond1)
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {}
				})
			},
			getList() {
				let that = this
				uni.request({
					url: that.global.url + 'api/qianyu_dzq/applet_setting_index',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('inuse_userinfo_token')
					},
					data: {
						type: 1
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							
							that.index_data = result.data
							that.chartData = result.data.tb
							if(uni.getStorageSync('signedby_user')){
								that.index_data.drafts = 1
							}
							that.opts.title.name = result.data.tb.all_contract_num >= 0 ?result.data.tb.all_contract_num : '无'
							
							
							
							
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			get_themedata(){
				let that = this
				uni.request({
					url: that.global.url + 'api/qianyu_dzq/applet_get_theme',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('inuse_userinfo_token')
					},
					data: {
						type: 1
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.theme_data = result.data
							that.datalist[0].icon = that.theme_data.iconlist.b1
							that.datalist[1].icon = that.theme_data.iconlist.b2
							that.datalist[2].icon = that.theme_data.iconlist.b3
							uni.setStorageSync('datalist', that.datalist)
							uni.setStorageSync('iconlist', that.theme_data.iconlist)
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			go_wenjian(){
				uni.switchTab({
					url:'/pages/wenjian/wenjian'
				})
			},
			change(e) {
				if (e.show) {
					this.hideTabBar = false
				} else {
					setTimeout(() => {
						this.hideTabBar = true
					}, 300)
				}
			},
			tiaozhuan(url) {
				this.$refs.popup.close()
				this.$refs.popup1.close()
				if (!Object.keys(this.userinfo).length > 0) {
					url = '/pages/login/login'
				}
				setTimeout(() => {
					this.hideTabBar = true
					uni.navigateTo({
						url: url
					});
				}, 300)
			},
			toggle1(type) {
				if (!Object.keys(this.userinfo).length > 0) {
					this.tiaozhuan()
				} else {
					// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
					this.$refs.popup1.open(type)
				}
			},
			toggle(type) {
				if (!Object.keys(this.userinfo).length > 0) {
					this.tiaozhuan()
				} else {
					console.log(this.userinfo.usertype)
					if (this.userinfo.usertype) {
						// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
						this.$refs.popup.open(type)
					}
				}
			},
			guanbi() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss">
	.content {}

	.mar-top17 {
		margin-top: 17rpx;
	}

	.pending_processing_boox {
		// min-height: 300rpx;
		background-color: #f3f3f3;
		margin-top: 20rpx;
		padding: 20rpx;

		.pending_processing_boox_item {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.item_top {
				border-left: 3px solid red;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 43rpx;
			}

			.kuai_box {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				// border: 1px solid #f1f1f1;
				width: 25%;
				padding: 25rpx 0rpx 25rpx 0rpx;

				.kuai_item_top {
					font-size: 25rpx;
					color: #5a5a5a;
					margin-bottom: 15rpx;
					// margin
				}

				.fen_num {
					font-size: 35rpx;
					font-weight: bold;
					margin-right: 5rpx;
				}
			}
		}
	}
</style>